<template>
  <div class="Ptop">
        <div class="Ptop1">
            <p class="Ptop2">
                所在城市：{{city}}
                <i class="Ptop3"></i>
            </p>
            <ul class="Ptop4">
                <li>
                    您好，
                    <span class="Ptopgreen">{{this.$store.state.phone}}</span>
                </li>
                <li v-for="(item,index) in nav" :key="index" @click="click">
                    <a class="Ptop5" href="###">{{item}}</a>
                </li>
                <li>
                    <img class="Ptop6" src="../assets/imgs/w-phone.png" alt="phone">
                    <a class="Ptop7" href="###">400-800-8820</a>
                </li>
            </ul>
        </div>
    </div> 
</template>

<script>

export default {
    name:'Topnav',
    data(){
        return{
            city:this.$store.state.city,
            nav:['退出','我的订单','我的消息','我是商家']
        }
    },
    mounted(){
        
    },
    methods:{
        click(index){
        for(var i=0;i<this.nav.length;i++){
            
        }
        if(index==3){
           this.$router.replace('/business');
        };
         }
    },
}
</script>

<style scoped>
.Ptop {
    width: 100%;
    height: 36px;
    background:#eeeeee;
    color: #b7b7b7;
    font-size: 14px;
}
/* 所在城市 */
.Ptop1 {
    height: 36px;
    width: 1280px;
    margin: 0 auto;
    line-height: 36px;
    display: flex;
    justify-content: space-between;
}
/* 地址 */
.Ptop2 {
    text-align: left;
}
/* 下拉框 */
.Ptop3 {
    display: inline-block;
    transform: rotate(45deg);
    border: 4px solid #999999;
    border-top-color: transparent;
    border-left-color: transparent;
    margin-bottom: 4px;
    margin-left: 2px;
}
/* 导航 */
.Ptop4 {
    display: flex;
    color: #929292;
}
.Ptopgreen {
    color: #4b943d;
    margin-right: 14px;
}
.Ptop5 {
    color: #727272;
    padding-right: 14px;
    border-right: 1px solid #999999;
    margin-right: 13px;
}
.Ptop6 {
    height: 16px;
    width: 16px;
    margin-right: 7px;
    vertical-align: middle;
}
.Ptop7 {
    color: #666666;
}
</style>